<template>
  <div class='classification-management'>
    <div class="serch">
      <el-form :inline='true'>
        <el-form-item label="标题搜索：">
          <el-input class="input" v-model="name" size="small" placeholder="输入分类名称搜索"
                    @keyup.enter.native='getLabelList(pageSize, 1)' style='width: 257px' maxlength = '16' clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="getTableData(pageSize, 1)">查询</el-button>
          <el-button type="primary" size="small" class="serchcha" @click="openNewDialog(1)" v-if='setRole("新增")'>新增知识分类</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table ref="singleTable" :data="tableData" highlight-current-row style="width: 100%">
      <el-table-column type="index" label="序号" width="200" align="center"></el-table-column>
      <el-table-column prop="name" label="分类名称" align="center"></el-table-column>
      <el-table-column prop="remark" label="备注" align="center"></el-table-column>
      <el-table-column align="center" label='操作'>
        <template slot-scope='scope'>
          <el-button type='text' size='small' @click='openNewDialog(0, scope.$index)' v-if='setRole("修改")'>修改
          </el-button>
          <el-button type='text' size='small' @click='openTips(scope.row.state, scope.row.id)'
                     :disabled='scope.row.state == 0' v-if='setRole("停用/启用")'>启用
          </el-button>
          <el-button type='text' size='small' @click='openTips(scope.row.state, scope.row.id)'
                     :disabled='scope.row.state == 1' v-if='setRole("停用/启用")'>停用
          </el-button>
          <el-button type='text' size='small' @click='deleLabel(scope.row.id)' v-if='setRole("删除")'>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pageblock pageinput">
      <el-button size="small" type="primary" class="topage" @click="getTableData(pageSize, pageNum)">跳转</el-button>
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :current-page="pageNum"
                     :page-sizes="[5,10,20]" :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
    <!-----------------新增知识分类---------------------->
    <el-dialog width="40%" title="新增知识分类" center :visible.sync="dialogVisible" :show-close='false'
               :closeOnClickModal='false' :closeOnPressEscape='false' >
      <el-form label-width='100px' style='width: 90%' :model='addItem' ref='addItemForm' :rules='rules'>
        <el-form-item label='分类名称：' prop='name'>
          <el-input show-word-limit maxlength='16' v-model='addItem.name'></el-input>
        </el-form-item>
        <el-form-item label='备注：'>
          <el-input type='textarea' show-word-limit :autosize="{ minRows: 3, maxRows: 6}" v-model='addItem.remark'
                    maxlength='20'></el-input>
        </el-form-item>
      </el-form>
      <div slot='footer' class='footer'>
        <el-button type='primary' size='small' @click='addKnowledge'>保 存</el-button>
        <el-button size='small' @click='cancelAdd'>取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import util from '@/util'
  import {
    findKnowledgeClassificationListPage,
    insertKnowledgeClassification,
    updateKnowledgeClassification,
    deleteKnowledgeClassification,
    enableDisableKnowledgeClassification
  } from '@/api'

  export default {
    name: 'classification-management',
    data() {
      return {
        total: 0,
        dialogVisible: false,
        isNew: 1, // 是否新增
        addItem: {
          name: '',
          remark: '',
          id: ''
        },
        rules: {
          name: [{required: true, message: '请输入分类名称', trigger: 'blur'},
            {validator: util.checkSpace, trigger: 'blur'}],
        },
        tableData: [],
        name: '',
        pageNum: 1,
        pageSize: 20
      }
    },
    computed: mapState(['merchantId', 'power']),
    created() {
    },
    mounted() {
      this.getTableData()
    },
    methods: {
      //打开新增弹框
      openNewDialog(type, index) {
        this.isNew = type
        if (type == 0) {
          this.addItem.name = this.tableData[index].name
          this.addItem.id = this.tableData[index].id
          this.addItem.remark = this.tableData[index].remark
        } else {
          this.addItem.name = ''
          this.addItem.id = ''
          this.addItem.remark = ''
        }
        this.dialogVisible = true
      },
      //新增知识
      addKnowledge() {
        let data = Object.assign({}, this.addItem)
        data.shopId = this.merchantId
        if (this.isNew == 1) {
          insertKnowledgeClassification(data).then((res) => {
            if (res.code == 200) {
              if (res.data) {
                this.$message.error(res.data)
                return
              }
              this.cancelAdd()
              this.$message.success('新增成功')
              this.getTableData(this.pageSize, 1)
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          updateKnowledgeClassification(data).then((res) => {
            if (res.code == 200) {
              if (res.data) {
                this.$message.error(res.data)
                return
              }
              this.cancelAdd()
              this.$message.success('修改成功')
              this.getTableData(this.pageSize, 1)
            }
          })
        }
      },
      //查询知识分类列表
      getTableData(pageSize, pageNum) {
        let data = {
          shopId: this.merchantId,
          name: this.name,
          pageNum: pageNum,
          pageSize: pageSize
        }
        findKnowledgeClassificationListPage(data).then(res => {
          if (res.code == 200) {
            this.tableData = res.data.list
            this.total = res.data.pageTotal
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      //删除分类
      deleLabel(id) {
        this.$confirm('确定删除该分类吗？', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消',
          center: true,
          showClose: false,
        }).then(() => {
          let data = {
            shopId: this.merchantId,
            id: id
          }
          deleteKnowledgeClassification(data).then(res => {
            if (res.code == 200) {
              this.$message.success('删除成功')
              this.getTableData(this.pageSize, 1)
            }
          })
        }).catch(() => {
        })
      },
      //停用/启用分类
      openTips(type, id) {
        let that = this
        let text = ''
        let confirmBtn = ''
        let nextState = null
        let successText = ''
        if (type == 0) {
          text = '停用分类，该分类下的所有知识也将停用！'
          confirmBtn = '确定停用'
          nextState = 1
          successText = '已停用'
        } else {
          text = '启用该分类，该分类下的所有标签也将同步启用！'
          confirmBtn = '确定启用'
          nextState = 0
          successText = '已启用'
        }
        this.$confirm(text, '提示', {
          confirmButtonText: confirmBtn,
          cancelButtonText: '取消',
          center: true,
          showClose: false,
          type: 'warning'
        }).then(() => {
          let data = {
            shopId: that.merchantId,
            id: id,
            state: nextState
          }
          enableDisableKnowledgeClassification(data).then(res => {
            if (res.code == 200) {
              this.$message.success(successText)
              this.getTableData(this.pageSize, 1)
            } else {
              that.$message.error(res.msg)
            }
          })
        }).catch(() => {
        })
      },
      //配置权限
      setRole(key) {
        return util.selectTitle(this.power, key);
      },
      //取消新增
      cancelAdd() {
        this.$refs.addItemForm.clearValidate()
        this.$refs.addItemForm.resetFields()
        this.dialogVisible = false
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.getTableData(val, this.pageNum)
      },
      handleCurrentChange(val) {
        this.pageNum = val
        this.getTableData(this.pageSize, val)
      },
    }
  }
</script>

<style scoped lang='less'>
  .classification-management {
    .serch {
      padding: 30px 20px 20px;
    }

    .footer {
      padding-bottom: 20px;
    }
  }
</style>
